<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>员工管理</title>
    <script type="text/javascript" src="../js/vue.js" ></script>
    <script type="text/javascript" src="../js/axios.min.js" ></script>
    <!--导入样式-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!--导入组件-->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<img src="D:\images\812fa545-1bfe-4c95-96a5-ec00ab3417c1.jpg" class="image">
   <img th:src="@{file://D:images/2.jpg}"class="image" >

    <div id="app">

    <el-row>
        <el-table
                :data="tableData"
                v-loading.body="loading"
                border
                @selection-change="selectionChange"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="ename"
                    label="姓名"
                    width="105">

            </el-table-column>


            <el-table-column prop="image" label="图片" min-width="20%" >
                <!-- 图片的显示 -->
                <template   slot-scope="scope">
                    <img :src="scope.row.image"  min-width="70" height="70" />
                </template>


                        <el-table-column
                                label="操作">
                            <template scope="scope">


                                <el-button :plain="true" type="success" size="small" icon="edit" @click="editClick(scope.row)">编辑</el-button>
                                <el-button :plain="true" type="danger" size="small" icon="delete" @click="deleteClick(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-row>


                <!--列表底部工具条和分页符-->
    <el-row style="margin-top: 20px" type="flex" justify="end">
        <el-col :span="6" >
            <el-button :plain="true" type="danger" size="small" icon="delete" @click="removeSelection">删除所选</el-button>
        </el-col>
        <el-col :span="18" >
            <el-pagination
                    style="float: right"
                    @size-change="pageSizeChange"
                    @current-change="currentPageChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-col>
    </el-row>
    <!--<el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false">
        <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
            <el-form-item label="姓名" prop="ename">
                <el-input v-model="editForm.ename" auto-complete="off"></el-input>
            </el-form-item>
            <el-col :span="6">
                <el-form-item label="资料上传:">
                    <el-upload
                            class="upload-demo"
                            action="/dept/add"
                            :on-change="addFile"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :before-remove="beforeRemove"
                            :on-success="success"
                            multiple
                            ref="upload"
                            accept=".jpg,.png."
                            :limit="1"
                            :on-exceed="handleExceed"
                            :file-list="form.fileList">
                        &lt;!&ndash;action上传路径  limit上传个数 accept上传文件的样式&ndash;&gt;
                        <el-button size="small" type="primary">点击上传</el-button>

                    </el-upload>
                </el-form-item>
            </el-col>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click.native="editFormVisible = false">取消</el-button>
            <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
        </div>
    </el-dialog>
-->
    <el-row>
    <el-dialog title="创建学习资料" :visible.sync="editFormVisible" :close-on-click-modal="false">
        <el-form :inline="true" :model="messageForm" class="demo-form-inline" :rules="editFormRules" ref="messageForm">
            <el-form-item label="标题：" prop="title">
                <el-input v-model="messageForm.title" auto-complete="off"></el-input>
            </el-form-item></br>

            <el-form-item label="资料文件：" prop="file">
                <el-upload
                        class="upload-demo"
                        action="/dept/add"
                        :on-change="addFile"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        :on-success="success"
                        multiple
                        :limit="1"
                        accept=".jpg,.png"
                        :on-exceed="handleExceed"
                        :file-list="messageForm.filePath">
                    <el-button size="small" type="warning" icon="el-icon-upload">点击上传</el-button>

                </el-upload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click.native="editFormVisible = false" @click="resetForm('messageForm')">取消</el-button>
            <el-button type="primary" @click.native="editSubmit('messageForm')" :loading="editLoading">提交</el-button>
        </div>
    </el-dialog>
    </el-row>
</div>

</body>
<script >
    var  app =new Vue({
        el:"#app",
         data:{
            options:[{
                options:""

            }],value:'',
             //列表数据
             tableData: [],
             //显示加载中样式
             loading:false,
             //搜索表单
             searchForm: {
                 id: '',
                 ename: ''//,
                 //deptNo: ''223
             },
             //多选值
             multipleSelection: [],
             //当前页
             currentPage:1,
             //分页大小
             pageSize:10,
             //总记录数
             total:800,
             //删除的弹出框
             deleteVisible:false,
             //编辑界面是否显示
             editFormVisible: false,
             editLoading: false,
             goUrl:'',
             editFormRules: {
                 ename: [
                     { required: true, message: '请输入姓名', trigger: 'blur' }
                 ]
             },
             //编辑界面数据
             messageForm:{
                 filePath:[]
             }


         },
        created:function(){

            //在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。
            //alert("111");
            var self = this;
            var start =(this.currentPage-1)*this.pageSize;
            var end =this.currentPage*this.pageSize+1;

            axios.post('/yuangong/list',{'start':start,'pageSize':this.pageSize}).then(function(response){
                // console.log(response.data);
                //alert(response.data.total);
                self.total=response.data.total;
                self.tableData = response.data.data;
                // self.multipleSelection=response.data.data;
            })
      /*      axios.post('/yuangong/getRole').then(function(response){
                // console.log(response.data);
                //alert(response.data.total);
               // self.total=response.data.total;
                self.options = response.data.options;
                // self.multipleSelection=response.data.data;
            })*/
        },
        methods:{
            success:function(res, file) {

                this.messageForm.filePath.push(file.response);

            },
            //文件超出限制个数时
            handleExceed:function(files, fileList) {
                this.$message.warning('当前限制选择 1 个文件');
            },
            //移除文件时
            beforeRemove:function(file, fileList) {
                return this.$confirm('确定移除此文件吗?');
            },
            beforeRemoveImg:function(file, fileList) {
                return this.$confirm('确定移除此文件吗?');
            },


            //表格重新加载数据
            loadingData:function() {
                var _self = this;
                _self.loading = true;
                //var self = this;
                var start =(this.currentPage-1)*this.pageSize;
                var end =this.currentPage*this.pageSize+1;
                var searchForm={'start':start,'pageSize':this.pageSize,'id':this.searchForm.id,'ename':this.searchForm.ename,'deptNo':this.searchForm.deptNo};
                //   alert(JSON.stringify(searchForm));
                axios.post('/yuangong/list',searchForm).then(function(response){
                    console.log(response.data);
                    //alert(response.data);
                    _self.total=response.data.total;
                    _self.tableData = response.data.data;
                    //_self.multipleSelection=response.data.data;
                })
                console.log(_self.currentPage);
                setTimeout(function(){
                    console.info("加载数据成功");
                    _self.loading = false;
                },300);
            },


       /* //表格编辑事件
        editClick:function(row) {
            this.goUrl="/dept/add2";
            this.editFormVisible = true;
            this.editForm = Object.assign({}, row);
        },*/
            editClick:function() {

                this.goUrl="/dept/add2";
                var _self = this;

                this.editFormVisible = true;//弹出层，让隐藏的弹出层显示
                _self.loadingData();//重新加载数据
            },
            //保存点击事件
            editSubmit:function(messageForm){
                this.$refs[messageForm].validate((valid) => {
                    if (valid) {
                        var _self = this;
                        _self.loading = true;

                        var formData =this.messageForm;
                        alert(formData);
                        var goUrl=this.goUrl;

                        axios.post(goUrl,formData).then(function(response){
                            console.log(response.data);
                            _self.total=response.data.total;
                            if(response.data>0){
                                _self.editFormVisible = false;// 让弹出层隐藏
                                _self.loadingData();//重新加载数据
                            }
                        })
                        console.info(this.messageForm);
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
           /* editSubmit:function(messageForm){
                this.$refs[messageForm].validate((valid) => {
                    if (valid) {
                        var _self = this;
                        _self.loading = true;
                        var formData =this.messageForm;
                        var goUrl=this.goUrl;
                        alert(JSON.stringify(formData));
                        axios.post(goUrl,formData).then(function(response){
                            console.log(response.data);
                            _self.total=response.data.total;
                            if(response.data>0){
                                _self.editFormVisible = false;// 让弹出层隐藏
                                _self.loadingData();//重新加载数据
                            }
                        })
                        console.info(this.messageForm);
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }*/
        }
    })

</script>
</html>